<template>
    <div>
        <!-- 头部区域 -->
        <div style="height: 60px;line-height: 60px;background-color: rgb(200, 222, 250);margin-bottom: 2px;display:flex">
            <div style="width:300px">
                <img src="@/assets/logo.png" alt="" style="width:40px;position: relative;top: 10px;left: 20px;">
                <span style="margin-left:25px;font-size:24px;">图书管理系统</span>
            </div>
            <div style="flex: 1;text-align: right;padding-right: 20px;">
                <el-dropdown size="medium">
                    <span class="el-dropdown-link" style="cursor:pointer">
                        {{ admin.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" style="margin-top:-5px">
                        <el-dropdown-item><div style="width:45px;text-align:center;" @click="logout">退出</div></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <!-- 侧边栏和主体 -->
        <div style="display: flex;">
            <!-- 侧边导航栏 -->
            <!-- calc减号要加空格才能生效-->
            <div style="width: 200px; min-height: calc(100vh - 62px); overflow: hidden; margin-right: 2px; background-color: #545c64;">
                <!-- :default-active="$route.path" router -> 根据路由跳转 -->
                <el-menu :default-active="$route.path" :default-openeds="['1']" router class="el-menu-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <!-- index选项进行路由切换 -->
                    <el-menu-item index="/"><i class="el-icon-s-home"></i><span>主页</span></el-menu-item>
                    <el-menu-item index="/user"><i class="el-icon-user"></i><span>用户管理</span></el-menu-item>
                    <el-menu-item index="/kind"><i class="el-icon-tickets"></i><span>图书类型管理</span></el-menu-item>
                    <el-menu-item index="/book"><i class="el-icon-s-management"></i><span>图书信息管理</span></el-menu-item>
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-reading"></i><span>图书借阅管理</span></template>
                        <el-menu-item index="/borrow"><i class="el-icon-notebook-2"></i><span>借阅归还</span></el-menu-item>
                        <el-menu-item index="/infor"><i class="el-icon-s-data"></i><span>借阅信息统计</span></el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/update"><i class="el-icon-lock"></i><span>个人信息</span></el-menu-item>
                </el-menu>
            </div>

            <!-- 主体数据 -->
            <div style="flex: 1;background-color: white;padding: 10px;">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
import request from '@/utils/request'
export default {
    name:'Layout',
    data(){
        return{
            admin:Cookies.get('admin')?JSON.parse(Cookies.get('admin')):{}
        }
    },
    methods:{
        logout(){
            // 后台请求
            request.get('/api/page/settings/exit.do').then(res=>{
                if(res.code=='1'){
                    // 清除浏览器用户数据
                    Cookies.remove('admin')
                    this.$router.push('/login')
                }else{
                    this.$notify.error(res.message)
                }
            })
            
        }
    }
}
</script>

<style>

</style>